<template>
  <div class="house_swipe">
    <mt-swipe @change="handleChange" :show-indicators="false">
      <mt-swipe-item>
        <img src="../../assets/image/recommend.png" alt="recommend">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../../assets/image/sale.png" alt="recommend">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../../assets/image/recommend.png" alt="recommend">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../../assets/image/recommend.png" alt="recommend">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../../assets/image/recommend.png" alt="recommend">
      </mt-swipe-item>
    </mt-swipe>
    <div class="select_img_video">
      <div>{{index}} / 5</div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Swipe, SwipeItem} from 'mint-ui';

  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  export default {
    name: 'QuSwipe',
    data() {
      return {
        index: 1,
      }
    },
    methods: {
      handleChange(index) {
        this.index = index + 1;
      },
    }
  }
</script>

<style scoped>
  .house_swipe {
    height: 250px;
    position: relative;
  }

  .house_swipe img{
    height: 100%;
    width: 100%;
  }
  .house_swipe .video{
    height: 10px;
    width: 100%;
  }
  .house_swipe .select_img_video {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 100%;
    font-size: 0.8rem;
    z-index: 999;
  }


  .house_swipe .select_img_video > div {
    padding: 2px 15px;
    background-color: #000000;
    color: #ffffff;
    border-radius: 20px;
    position: absolute;
    right: 10px;
    opacity: 0.5;
  }

</style>
